<template>
    <div>

        <div style="margin-top: -20px;margin-bottom: 5px;">
            <el-input v-model="DictTypeName" style="width: 150px;" placeholder="类型名称"></el-input>
            <el-button type="primary" style="margin-left: 5px;" @click="onSubmit()">查询</el-button>

            <el-button @click="ShowAdd">添加</el-button>
        </div>

        <el-table :data="tableData" border style="width: 100%;height: 50vh;">
            <el-table-column type="selection" width="55" />
            <el-table-column fixed prop="Id" label="编号" width="60" />
            <el-table-column label="类型名称" prop="DictTypeName" width="120" />
            <el-table-column label="时间" prop="CreateTime" width="200px" />
            <el-table-column label="状态" prop="Status" width="120" />

            <el-table-column fixed="right" label="操作" min-width="120">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="Update(scope.row.Id)">编辑</el-button>
                    <el-button link type="primary" size="small" @click="Delete(scope.row.Id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>


        <el-pagination v-model:current-page="pageIndex" v-model:page-size="pageSize" :page-sizes="[5, 10, 20, 30, 40]"
            :size="size" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
            :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            style="margin-top: 10px;" />


        <el-dialog v-model="dialogAddVisible" title="添加" width="450px" draggable>
            <DictTypeAdd @Close="Close" v-if="dialogAddVisible"></DictTypeAdd>
        </el-dialog>
        <el-dialog v-model="dialogUpdateVisible" title="修改" width="400px" draggable>
            <DictTypeUpdate :Id="Id" @Close="Close" v-if="dialogUpdateVisible"></DictTypeUpdate>
        </el-dialog>

    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import DictTypeAdd from './DictTypeAdd.vue';
import DictTypeUpdate from './DictTypeUpdate.vue';
import dicttypeapi from '@/api/dicttypeapi'
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'




const Id = ref();
const DictTypeName = ref("");
const tableData = ref([]);
const total = ref(0);
const pageSize = ref(5);
const pageIndex = ref(1);

const size = ref<ElTable>('default')
const background = ref(false)
const disabled = ref(false)

const dialogAddVisible = ref(false);
const dialogUpdateVisible = ref(false);



const getdata = (DictTypeName: string = "", PageSize: number = 5, PageIndex: number = 1) => {
    var query = {
        DictTypeName: DictTypeName,
        PageSize: PageSize,
        PageIndex: PageIndex
    }
    dicttypeapi.query(query).then(res => {
        console.log("dicttypedata=", res);
        tableData.value = res.data
        total.value = res.total;
    }).catch(err => {
        console.log("err=>", err);
    })
}

onMounted(() => {
    getdata(DictTypeName.value, pageSize.value, pageIndex.value)
})

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
    pageSize.value = val;
    pageIndex.value = 1;
    getdata(DictTypeName.value, pageSize.value, pageIndex.value);
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    pageIndex.value = val;
    getdata(DictTypeName.value, pageSize.value, pageIndex.value);
}

const onSubmit = () => {
    getdata(DictTypeName.value)
}

const ShowAdd = () => {
    dialogAddVisible.value = true;
}

const Update = (id: any) => {
    Id.value = id
    dialogUpdateVisible.value = true;
}

const Close = (val: any) => {
    switch (val) {
        case "add":
            dialogAddVisible.value = false;
            pageIndex.value = 1;
            getdata(DictTypeName.value, pageSize.value, pageIndex.value);
            break;
        case "upd":
            dialogUpdateVisible.value = false;
            pageIndex.value = 1;
            getdata(DictTypeName.value, pageSize.value, pageIndex.value);
            break;
    }
}

const Delete = (Id: any) => {
    ElMessageBox.confirm('确定要删除吗？', 'Warning', {
        type: 'warning',
    }).then(() => {
        dicttypeapi.del({
            id: Id
        }).then((res) => {
            if (res.code > 0) {
                ElNotification.success({
                    title: '提示',
                    message: '删除成功',
                    type: 'success',
                    showClose: false,

                })
                getdata();
            } else {
                ElNotification({
                    title: '提示',
                    message: '失败',
                    type: 'error',
                    showClose: false,
                })
            }

        })
    }).catch(() => {
        ElNotification({
            title: '提示',
            message: '删除取消',
            type: 'error',
            showClose: false,
        })
    })

    getdata();
}

</script>

<style scoped></style>